<template>
	<view>
		<view class="" v-for="(commodity, index) in commodity" :key="index">
			<view class="" v-if="id == commodity.id">
				<view class="commodity" v-for="(items, index) in commodity.type" :key="index">
					<view class="comTop">
						<text>{{ items.category }}</text>
					</view>
					<view class="comType">
						<view class="" v-for="(item, index) in items.types" :key="index">
							<image :src="item.url" mode="aspectFit"></image>
							<text>{{ item.name }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				commodity: [
					{
						id: 0,
						type: [
							{
								id: 0,
								category: "主粮",
								types: [
									{
										id: 0,
										name: "小型犬",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 1,
										name: "中型犬",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 2,
										name: "大型犬",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									}
								]
							},{
								id: 1,
								category: "零食",
								types: [
									{
										id: 0,
										name: "肉类零食",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 1,
										name: "骨类零食",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 2,
										name: "素食零食",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									}
								]
							}
						]
					},
					{
						id: 1,
						type: [
							{
								id: 0,
								category: "主粮",
								types: [
									{
										id: 0,
										name: "幼猫粮",
										url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3060230936,3301968122&fm=26&gp=0.jpg"
									},{
										id: 1,
										name: "成猫粮",
										url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3060230936,3301968122&fm=26&gp=0.jpg"
									},{
										id: 2,
										name: "全猫粮",
										url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3060230936,3301968122&fm=26&gp=0.jpg"
									}
								]
							},{
								id: 1,
								category: "零食",
								types: [
									{
										id: 0,
										name: "肉类零食",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3948975991,3962692049&fm=26&gp=0.jpg"
									},{
										id: 1,
										name: "鱼类零食",
										url: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=368381436,1977281542&fm=26&gp=0.jpg"
									},{
										id: 2,
										name: "素食零食",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3948975991,3962692049&fm=26&gp=0.jpg"
									}
								]
							}
						]
					},
					{
						id: 2,
						type: [
							{
								id: 0,
								category: "主粮",
								types: [
									{
										id: 0,
										name: "小型犬",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 1,
										name: "中型犬",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 2,
										name: "大型犬",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									}
								]
							},{
								id: 1,
								category: "零食",
								types: [
									{
										id: 0,
										name: "肉类零食",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 1,
										name: "骨类零食",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 2,
										name: "素食零食",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									}
								]
							}
						]
					},
					{
						id: 3,
						type: [
							{
								id: 0,
								category: "主粮",
								types: [
									{
										id: 0,
										name: "小型犬",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 1,
										name: "中型犬",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 2,
										name: "大型犬",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									}
								]
							},{
								id: 1,
								category: "零食",
								types: [
									{
										id: 0,
										name: "肉类零食",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 1,
										name: "骨类零食",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 2,
										name: "素食零食",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									}
								]
							}
						]
					},
					{
						id: 4,
						type: [
							{
								id: 0,
								category: "主粮",
								types: [
									{
										id: 0,
										name: "小型犬",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 1,
										name: "中型犬",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 2,
										name: "大型犬",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									}
								]
							},{
								id: 1,
								category: "零食",
								types: [
									{
										id: 0,
										name: "肉类零食",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 1,
										name: "骨类零食",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 2,
										name: "素食零食",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									}
								]
							}
						]
					},
					{
						id: 5,
						type: [
							{
								id: 0,
								category: "主粮",
								types: [
									{
										id: 0,
										name: "小型犬",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 1,
										name: "中型犬",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 2,
										name: "大型犬",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									}
								]
							},{
								id: 1,
								category: "零食",
								types: [
									{
										id: 0,
										name: "肉类零食",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 1,
										name: "骨类零食",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									},{
										id: 2,
										name: "素食零食",
										url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3984312720,503270898&fm=26&gp=0.jpg"
									}
								]
							}
						]
					}
				]
			}
		},
		methods: {
			getCommod(byIdgetCom) {
				// uni.request({
				// 	url: "",
				// 	data: {
				// 		id: listId
				// 	},
				// 	success: (res) => {
				// 		console.log(res)
				// 	}
				// })
				this.id = byIdgetCom;
				console.log(byIdgetCom);
			}
		}
	}
</script>

<style>
.comTop {
	/* font-size: 36rpx; */
	padding-left: 100px;
	height: 30px;
	line-height: 30px;
	border-bottom: 1px solid #e8e8e8;
}
.comType {
	font-size: 32rpx;
	height: 260rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	border-bottom: 1px solid #e8e8e8;
}
.comType > view {
	width: 33%;
	text-align: center;
}
.comType image {
	height: 180rpx;
	width: 180rpx;
}
</style>
